<template>
  <div class="content1">
    <div class="headerBox">
      <el-button type="primary" @click="addrole">新增角色</el-button>
      <el-button type="danger" @click="delrole">移除角色</el-button>
    </div>
    <div class="mainBox" v-for="(item, index) in roleList" :key="index">
      <div
        :class="currtentIndex === index ? 'active' : 'default'"
        @click="checkRole(index, item)"
      ></div>
      <div class="title">
        <span>{{ item.name }}</span>
      </div>
      <div class="btnBox" v-for="(i, index) in item.sysRoleMenus" :key="index">
        <div class="item">{{ i.menuName }}</div>
      </div>
    </div>
    <el-dialog
      title="新增角色内容"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
    >
      <el-form>
        <el-form-item label="角色名称：">
          <el-input
            type="text"
            v-model="roleName"
            style="width:300px"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限页面：">
          <div class="routerBox">
            <div
              v-for="(item, index) in routerList"
              :key="index"
              :class="[checkIdsArr.includes(item.id) ? 'item' : 'item1']"
              @click="checkRouter(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Const from "@/api/Const.js";
export default {
  name: "roleItem",
  data() {
    return {
      centerDialogVisible: false,
      roleName: "",
      checkIdsArr: [],
      checkList: [],
      currtentIndex: "",
      currRouIndex: "",
      currRouList: [],
      routerList: [],
      roleList: [
        {
          name: "政务专员",
          check: false,
          routerList: [
            { name: "数据总览", id: "0" },
            { name: "证件管理", id: "1" }
          ]
        },
        {
          name: "商品专员",
          check: false,
          routerList: [
            { name: "数据总览", id: "0" },
            { name: "证件管理", id: "1" }
          ]
        }
      ],
      routerList: [
        { name: "数据总览", id: "0", check: false },
        { name: "证件管理", id: "1", check: false },
        { name: "证件管理", id: "1", check: false },
        { name: "证件管理", id: "1", check: false },
        { name: "证件管理", id: "1", check: false }
      ]
    };
  },
  mounted() {
    this.initD();
  },
  methods: {
    initD() {
      var that = this;
      this.$axios.get(Const.api.selectRoleListWithMenu).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          var data = res.data.data;
          that.roleList = data;
          that.$axios.get(Const.api.selectMenuList).then(res => {
            console.log(res);
            if (res.data.code == 0) {
              var data = res.data.data;
              that.routerList = data;
            }
          });
        }
      });
    },

    addrole() {
      this.initD();
      this.roleName = null;
      this.currRouList = [];
      this.centerDialogVisible = true;
    },

    saveRole() {
      if (!this.roleName) {
        this.$message.error("请填写角色名称！");
        return false;
      }

      var that = this;
      let menuIdStr;
      if (this.checkIdsArr.length > 0) {
        menuIdStr = that.checkIdsArr.join(",");
      }

      this.$axios
        .get(Const.api.saveRole, {
          params: {
            name: that.roleName,
            menuIdStr
          }
        })
        .then(res => {
          console.log(res);
          that.$message({
            message: "保存成功！",
            type: "success"
          });
          this.initD();
        });
      this.centerDialogVisible = false;
      this.checkIdsArr = [];
    },
    delrole() {
      if (this.checkList.id) {
        this.$confirm(`确定要删除吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.deleteRoleApiHandle(this.checkList.id);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          message: "请先选择要移除的角色！",
          type: "warning"
        });
      }
    },
    deleteRoleApiHandle(id) {
      this.$axios
        .get(Const.api.deleteRole, {
          params: {
            id
          }
        })
        .then(res => {
          let { data } = res;
          if (data.code === 0) {
            this.currtentIndex = "";
            this.checkList = [];
            this.initD();
            this.$message.success({
              message: "删除成功！",
              type: "success"
            });
          } else {
            this.$message.error(data.message);
          }
        });

      console.log(this.checkList);
    },
    checkRole(index) {
      if (this.currtentIndex === index) {
        this.currtentIndex = "";
        this.checkList = [];
      } else {
        this.currtentIndex = index;
        this.checkList = this.roleList[index];
      }
    },
    checkRouter({ id }) {
      if (this.checkIdsArr.indexOf(id) === -1) {
        // 不存在 添加
        this.checkIdsArr.push(id);
      } else {
        // 存在 删除
        let index = this.checkIdsArr.findIndex(item => item === id);
        this.checkIdsArr.splice(index, 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.content1 {
  background-color: #fff;
  margin-top: 20px;
  min-width: 1600px;
  .headerBox {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  .mainBox {
    margin-bottom: 30px;
    min-width: 1600px;
    min-height: 60px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 20px;
    .active {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #409eff;
      border: 1px solid #333;
      margin-right: 30px;
      cursor: pointer;
    }
    .default {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 30px;
      background-color: #fff;
      border: 1px solid #333;
      cursor: pointer;
    }
    .title {
      color: #000;
      font-weight: 600;
      font-size: 20px;
    }
    .btnBox {
      margin: 10px;
      background-color: #78acff;
      width: 180px;
      height: 45px;
      color: #fff;
      font-weight: 600;
      // font-size: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      border-radius: 10px;
      margin-left: 20px;
      cursor: pointer;
      .item {
        width: 100px;
      }
      .del {
        display: none;
      }
    }
    .btnBox1 {
      margin: 10px;
      background-color: #fff;
      width: 180px;
      height: 45px;
      color: #333;
      font-weight: 600;
      // font-size: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      border-radius: 10px;
      margin-left: 20px;
      cursor: pointer;
      .item1 {
        width: 100px;
      }
      .del1 {
        height: 40px;
        color: #fff;
        display: block;
        width: 60px;
        line-height: 40px;
        border-radius: 8px;
        font-size: 14px;
        background-color: #78acff;
      }
    }
  }
  .routerBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item1 {
      background-color: #fff;
      color: #333;
      border: 1px solid #999;
    }
    .item {
      background-color: #78acff;
      color: #fff;
      border: 1px solid #fff;
    }
    .item1,
    .item {
      margin: 10px;
      // background-color: #78ACFF;
      width: 180px;
      height: 45px;
      // color: #fff;
      font-weight: 600;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      border-radius: 10px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}
</style>
